<template>
  <div id="HealthLogDetails">
    <div class="top">
      <van-nav-bar
        class="van-nav-bar"
        fixed
        left-arrow
        left-text="返回"
        placeholder
        title="历史复康日志"
        @click-left="onClickLeft"
      ></van-nav-bar>
      <div class="date">{{ list.log_date !== undefined ? list.log_date.split(" ")[0] : '' }}</div>
    </div>
    <div class="bom-info">
      <div class="journalTitle">
        <img alt src="@/assets/images/journal/stjyd.png"/>
        <h1>身体及运动</h1>
      </div>
      <van-row align="center" justify="space-between" type="flex">
        <van-col span="20">
          <van-field
            v-model="list.tizhong"
            label="当前体重"
            placeholder="暂无数据"
            readonly
            type="number"
          />
        </van-col>
        <van-col class="company" span="3">kg</van-col>
      </van-row>
<!--      <van-row align="center" justify="space-between" type="flex">-->
<!--        <van-col span="20">-->
<!--          <van-field-->
<!--            v-model="list.tizhong_old"-->
<!--            label="一个月前体重"-->
<!--            placeholder="暂无数据"-->
<!--            readonly-->
<!--            type="number"-->
<!--          />-->
<!--        </van-col>-->
<!--        <van-col class="company" span="3">kg</van-col>-->
<!--      </van-row>-->
<!--      <van-row align="center" justify="space-between" type="flex">-->
<!--        <van-col span="20">-->
<!--          <van-field-->
<!--            v-model="list.tiwen"-->
<!--            label="体温"-->
<!--            placeholder="暂无数据"-->
<!--            readonly-->
<!--            type="number"-->
<!--          />-->
<!--        </van-col>-->
<!--        <van-col class="company" span="3">°C</van-col>-->
<!--      </van-row>-->
      <van-row align="center" justify="space-between" type="flex">
        <van-col span="20">
          <van-field
            v-model="list.woli"
            label="握力"
            placeholder="暂无数据"
            readonly
            type="number"
          />
        </van-col>
        <van-col class="company" span="3">kg</van-col>
      </van-row>
      <van-row align="center" justify="space-between" type="flex">
        <van-col span="20">
          <van-field
            v-model="list.tizhilv"
            label="去脂体重"
            placeholder="暂无数据"
            readonly
            type="number"
          />
        </van-col>
        <van-col class="company" span="3">kg</van-col>
      </van-row>
      <van-row
        v-if="list.shenti_media"
        align="center"
        class="p_row"
        flex-direction="column"
        justify="flex-start"
        type="flex"
      >
        <p class="p_title">图片及视频</p>
        <div class="img_box">
          <span v-for="(item,index) in stmedia" :key="index" class="img">
            <van-image
              :src="apiConfig.imgUrl + item.nm"
              fit="contain"
              @click="Previewpac(item.nm,index)"
            />
          </span>
        </div>
      </van-row>
<!--      <van-field-->
<!--        class="mt25"-->
<!--        input-align="right"-->
<!--        label="是否活动"-->
<!--        name="breakRadio"-->
<!--      >-->
<!--        <template #input>-->
<!--          <van-radio-group v-model="list.is_huodong" direction="horizontal">-->
<!--            <van-radio :name="1" disabled>是</van-radio>-->
<!--            <van-radio :name="0" disabled>否</van-radio>-->
<!--          </van-radio-group>-->
<!--        </template>-->
<!--      </van-field>-->
      <van-row align="center" justify="end" type="flex">
        <van-col span="24">
          <van-field
            v-model="list.xiachuang_time"
            label="下床活动"
            placeholder="暂无数据"
            readonly
          />
        </van-col>
<!--        <van-col class="company" span="3">小时</van-col>-->
      </van-row>
      <van-row align="center" justify="end" type="flex">
        <van-col span="24">
          <van-field
            v-model="list.buxing_time"
            label="步行时间"
            placeholder="暂无数据"
            readonly
          />
        </van-col>
      </van-row>
<!--      <van-row-->
<!--        v-if="list.huodong_media"-->
<!--        align="center"-->
<!--        class="p_row"-->
<!--        flex-direction="column"-->
<!--        justify="flex-start"-->
<!--        type="flex"-->
<!--      >-->
<!--        <p class="p_title">图片及视频</p>-->
<!--        <div class="img_box">-->
<!--          <div v-for="(item,index) in list.huodong_media" :key="item" class="img">-->
<!--            <van-image-->
<!--              :src="apiConfig.imgUrl + item"-->
<!--              fit="contain"-->
<!--              @click="Preview(list.huodong_media,index)"-->
<!--            />-->
<!--          </div>-->
<!--        </div>-->
<!--      </van-row>-->
    </div>
    <!-- 饮食情况 -->
    <!-- <div class="bom-info bom-infoTow">
      <div class="journalTitle">
        <img alt="" src="@/assets/images/journal/ysqk.png"/>
        <h1>饮食情况</h1>
      </div>
      <div v-if="list.yinshi_zaocan" class="dietBox">
        <p class="dietTitle">早餐</p>
         <div class="breakfast" v-for="item in zcArr.zaocan_list" :key="item.id">
          <div class="breakfastLeft">
            <div class="breakfastImg">
              <img v-if="item.img != ''" :src="apiConfig.imgUrl + item.img" alt />
              <van-empty v-if="item.img == ''" image="error" description />
            </div>
            <p>{{item.title}} x {{ item.nums + item.danwei }}</p>
          </div>
          
          <p v-if="item.danwei == 'ml'" >{{ item.nums/100 * item.nengliang}}kcal</p>
          <p v-else >{{ item.nums * item.nengliang}}kcal</p>
          
        </div>
      </div>
      <div v-if="list.yinshi_wucan" class="dietBox">
        <p class="dietTitle">午餐</p>
        <div class="breakfast" v-for="item in wcArr.wucan_list" :key="item.id">
          <div class="breakfastLeft">
            <div class="breakfastImg">
              <img v-if="item.img != ''" :src="apiConfig.imgUrl + item.img" alt />
              <van-empty v-if="item.img == ''" image="error" description />
            </div>
            <p>{{item.title}} x {{ item.nums + item.danwei }}</p>
          </div>
          <p v-if="item.danwei == 'ml'" >{{ item.nums/100 * item.nengliang}}kcal</p>
          <p v-else >{{ item.nums * item.nengliang}}kcal</p>
        </div>
      </div>
      <div v-if="list.yinshi_wancan" class="dietBox">
        <p class="dietTitle">晚餐</p>
        <div class="breakfast" v-for="item in dArr.wancan_list" :key="item.id">
          <div class="breakfastLeft">
            <div class="breakfastImg">
              <img v-if="item.img != ''" :src="apiConfig.imgUrl + item.img" alt />
              <van-empty v-if="item.img == ''" image="error" description />
            </div>
            <p>{{item.title}} x {{ item.nums + item.danwei }}</p>
          </div>
          <p v-if="item.danwei == 'ml'" >{{ item.nums/100 * item.nengliang}}kcal</p>
          <p v-else >{{ item.nums * item.nengliang}}kcal</p>
        </div>
      </div>
      <div v-if="list.yinshi_jiacan" class="dietBox">
        <p class="dietTitle">加餐</p>
        <div v-for="(item, index) in yinshi_jiacan" :key="index" style="width:100%"> 
          <div>加餐时间：{{ item.date }}</div>
          <div v-for="el in item.list" :key="el.id" class="breakfast">
            <div class="breakfastLeft">
              <div class="breakfastImg">
                <img
                  v-if="el.img != ''"
                  :src="apiConfig.imgUrl + el.img"
                  alt=""
                />
                <van-empty v-if="el.img == ''" description="" image="error"/>
              </div>
              <p>{{ el.title }} x {{ el.nums + el.danwei }}</p>
            </div>
            <p v-if="el.danwei == 'ml'" >{{ el.nums/100 * el.nengliang }}kcal</p>
            <p v-else >{{ el.nums * el.nengliang}}kcal</p>
          </div>
        </div>
      </div>
    </div> -->
    <!-- 身体症状 -->
    <div class="bom-info bom-infoTow main">
      <div class="journalTitle">
        <img alt src="@/assets/images/journal/stzz.png"/>
        <h1>身体症状</h1>
      </div>
      <div class="header">
        <div class="xinqing">
          <div class="tit">
            <img alt="" src="@/assets/images/journal/xq.png"/>
            <span class="title">心情</span>
          </div>
          <div id="xinqing">
            <div v-for="item in numList" :key="item">
              <span
                id="dengji"
                :class="list.zz_xinqing == item ? 'active' : ''"
              >
                {{ item }}
              </span>
            </div>
          </div>
          <div class="detail">
            <span class="low">没有痛苦</span>
            <span class="nice">极度痛苦</span>
          </div>
        </div>
        <div class="shiyu">
          <div class="tit">
            <img alt="" src="@/assets/images/journal/shiyu.png"/>
            <span class="title">食欲</span>
          </div>
          <div id="shiyu">
            <div v-for="item in numList" :key="item">
              <span id="dengji" :class="list.zz_shiyu == item ? 'active' : ''">
                {{ item }}
              </span>
            </div>
          </div>
          <div class="detail">
            <span class="low">无食欲</span>
            <span class="nice">食欲良好</span>
          </div>
        </div>
        <div class="shuimian">
          <div class="tit">
            <img alt="" src="@/assets/images/journal/sm.png"/>
            <span class="title">睡眠</span>
          </div>

          <van-row
            align="center"
            class="borderNone"
            justify="end"
            type="flex"
          >
            <van-col span="24">
              <van-field
                v-model="list.zz_shuimianshichang"
                label="睡眠时长"
                placeholder="暂无数据"
                readonly
              />
            </van-col>

          </van-row>
        </div>
      </div>
      <div class="paibian">
        <div class="pb">
          <div class="tit">
            <img alt="" src="@/assets/images/journal/pb.png"/>
            <span class="title">排便</span>
          </div>
          <div>
            <van-field input-align="right" label="是否排便" name="breakRadio">
              <template #input>
                <van-radio-group
                  v-model="list.zz_shifoupaibian"
                  direction="horizontal"
                >
                  <van-radio :name="1" disabled>是</van-radio>
                  <van-radio :name="0" disabled>否</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-row align="center" justify="space-between" type="flex">
              <van-col span="30">
                <van-field
                  v-model="list.zz_dabiancishu"
                  label="大便次数"
                  placeholder="暂无数据"
                  readonly
                  type="number"
                />
              </van-col>
              <van-col class="company" span="3">次</van-col>
            </van-row>
            <van-field input-align="right" label="大便干燥" name="breakRadio">
              <template #input>
                <van-radio-group
                  v-model="list.zz_shifouganzao"
                  direction="horizontal"
                >
                  <van-radio :name="1" disabled>是</van-radio>
                  <van-radio :name="0" disabled>否</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-field input-align="right" label="是否腹泻" name="breakRadio">
              <template #input>
                <van-radio-group
                  v-model="list.zz_shifoufuxie"
                  direction="horizontal"
                >
                  <van-radio :name="1" disabled>是</van-radio>
                  <van-radio :name="0" disabled>否</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-row align="center" justify="space-between" type="flex">
              <van-field
                v-model="list.zz_xiaobian"
                class="title"
                input-align="right"
                label="小便"
                name="radio"
              >
              </van-field>
            </van-row>
          </div>
        </div>
      </div>
      <div class="zhengzhuang">
        <div class="zz">
          <div class="tit">
            <img alt="" src="@/assets/images/journal/qsxzz.png"/>
            <span class="title">全身性症状</span>
          </div>
          <div class="mian">
            <div class="xm">
              <span class="title"
              >胸闷</span
              >
              <div id="xiongmen" >
                <span v-for="item in numList" :class="list.zz_xiongmencishu == item ? 'active' : ''" id="xm" :key="item">
                  {{ item }}
                </span>
              </div>
            </div>
            <div class="xh">
              <span class="title"
              >心慌</span
              >
              <div id="xinhuang" >
                <span v-for="item in numList"  :class="list.zz_shifouxinhuang==item ? 'active' : ''"  id="xh" :key="item">
                  {{ item }}
                </span>
              </div>
            </div>
            <div class="teto">
              <span class="title"
              >疼痛</span
              >
              <div id="tengtong">
                <span v-for="item in numList" :class="list.zz_tengtongdengji == item ? 'active' : ''" id="teto" :key="item">
                  {{ item }}
                </span>
              </div>
            </div>
            <div class="fr">
              <span class="title"
              >发热</span
              >
              <div id="fare">
                <span v-for="item in numList" :class="list.zz_fare == item ? 'active' : ''" id="fr" :key="item">
                  {{ item }}
                </span>
              </div>
              <div class="detail">
                <span class="low">正常</span>
                <span class="nice">39℃以上</span>
              </div>
            </div>
            <div class="sz">
              <span class="title"
              >水肿</span
              >
              <div id="shuizhong">
                <span v-for="item in numList"  :class="list.zz_shuizhong == item ? 'active' : ''" id="sz" :key="item">
                  {{ item }}
                </span>
              </div>
              <div class="detail">
                <span class="low">正常</span>
                <span class="nice">发泡，流水</span>
              </div>
            </div>
            <div class="fl">
              <img alt="" src="@/assets/images/journal/fl.png"/><span class="title"
            >乏力</span
            >
              <div id="fali">
                <span v-for="item in numList" :class="list.zz_fali == item ? 'active' : ''" id="fl" :key="item">
                  {{ item }}
                </span>
              </div>
              <div class="detail">
                <span class="low">没有乏力</span>
                <span class="nice">极度乏力</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="huxi">
        <div class="hx">
          <div class="tit">
            <img alt="" src="@/assets/images/journal/hxxtzz.png"/>
            <span class="title">呼吸系统症状</span>
          </div>
          <div class="mian">
            <div class="hxkn">
              <img alt="" src="@/assets/images/journal/hxkn.png"/><span class="title"
            >呼吸困难</span
            >
              <div id="huxi" >
                <span v-for="item in numList" :class="list.zz_huxikunnan == item ? 'active' : ''" id="hxkn" :key="item">
                  {{ item }}
                </span>
              </div>
              <div class="detail">
                <span class="low">无呼吸困难</span>
                <span class="nice">极度呼吸困难</span>
              </div>
            </div>
            <div class="kskt">
              <img alt="" src="@/assets/images/journal/hxkn.png"/><span class="title"
            >咳嗽/咳痰</span
            >
              <div id="kesouketan">
                <span v-for="item in numList" :class="list.zz_kesou == item ? 'active' : ''" id="kskt" :key="item">
                  {{ item }}
                </span>
              </div>
              <div class="detail">
                <span class="low">无咳嗽</span>
                <span class="nice">重度</span>
              </div>
            </div>
            <van-row align="center" justify="space-between" type="flex">
              <van-field
                class="title"
                input-align="right"
                label="咳血"
                name="radio"
              >
                <template #input>
                  <van-radio-group
                    v-model="list.zz_kexue"
                    direction="horizontal"
                  >
                    <van-radio name="1" disabled>有，立刻就医</van-radio>
                    <van-radio name="0" disabled>无</van-radio>
                  </van-radio-group>
                </template>
              </van-field>
            </van-row>
            <van-row align="center" justify="space-between" type="flex">
              <van-field
                class="title"
                input-align="right"
                label="声音嘶哑"
                name="radio"
              >
                <template #input>
                  <van-radio-group
                    v-model="list.zz_shengyinsiya"
                    direction="horizontal"
                  >
                    <van-radio :name="1" disabled>是</van-radio>
                    <van-radio :name="0" disabled>无</van-radio>
                  </van-radio-group>
                </template>
              </van-field>
            </van-row>
          </div>
        </div>
      </div>
      <div class="xhxt">
        <div class="xh">
          <div class="tit">
            <img alt="" src="@/assets/images/journal/xhxtzz.png"/>
            <span class="title">消化系统症状</span>
          </div>
          <div class="mian">
            <div class="kg">
              <img alt="" src="@/assets/images/journal/kg.png"/><span class="title"
            >口干</span
            >

              <div id="kougan">
                <span v-for="item in numList" :class="list.zz_xh_kougan == item ? 'active' : ''"  id="kg" :key="item">
                  {{ item }}
                </span>
              </div>
              <div class="detail">
                <span class="low">无口干</span>
                <span class="nice">极度口干</span>
              </div>
            </div>
            <div class="ex">
              <img alt="" src="@/assets/images/journal/ex.png"/><span class="title"
            >恶心</span
            >
              <div id="exin">
                <span v-for="item in numList" :class="list.zz_xh_outu == item ? 'active' : ''" id="ex" :key="item">
                  {{ item }}
                </span>
              </div>
              <div class="detail">
                <span class="low">无恶心</span>
                <span class="nice">恶心难以忍受</span>
              </div>
            </div>
            <div class="fz">
              <span class="title"
              >腹胀</span
              >
              <div id="fuzhang">
                <span v-for="item in numList" id="fz" :class="list.zz_xh_fuzhang == item ? 'active' : ''" :key="item">
                  {{ item }}
                </span>
              </div>
              <div class="detail">
                <span class="low">无症状</span>
                <span class="nice">极度不适</span>
              </div>
            </div>
            <div class="fx">
              <span class="title"
              >腹泻</span
              >
              <div id="fuxie">
                <span v-for="item in numList" id="fx" :class="list.zz_xh_fuxie == item ? 'active' : ''" :key="item">
                  {{ item }}
                </span>
              </div>
              <div class="detail">
                <span class="low">大便&lt;4</span>
                <span class="nice">危及生命</span>
              </div>
            </div>
            <div class="bm">
              <span class="title"
              >便秘</span
              >
              <div id="bianmi">
                <span v-for="item in numList" :class="list.zz_xh_bianmi == item ? 'active' : ''" id="bm" :key="item">
                  {{ item }}
                </span>
              </div>
              <div class="detail">
                <span class="low">正常排便</span>
                <span class="nice">不排便</span>
              </div>
            </div>
            <van-row align="center" justify="space-between" type="flex">
              <van-field
                class="title"
                input-align="right"
                label="呕血/便血"
                name="radio"
              >
                <template #input>
                  <van-radio-group
                    v-model="list.zz_xh_ouxue"
                    direction="horizontal"
                  >
                    <van-radio name="1" disabled>有，立刻就医</van-radio>
                    <van-radio name="0" disabled>无</van-radio>
                  </van-radio-group>
                </template>
              </van-field>
            </van-row>
            <van-row align="center" class="fanliu" justify="space-between" type="flex">
              <van-col class="fliu">
                <div>反流</div>
                <div class="info">
                  反流常指在无恶心、干呕和不用力的情况下，胃内容物反流入口腔或咽部。
                </div>
              </van-col>
              <van-radio-group
                v-model="list.zz_fanliu"
                direction="horizontal"
              >
                <van-radio :name="1" disabled>是</van-radio>
                <van-radio :name="0" disabled>否</van-radio>
              </van-radio-group>
            </van-row>
          </div>
        </div>
      </div>
      <div class="xhxt">
        <div class="xh">
          <div class="tit">
            <img alt="" src="@/assets/images/journal/jsxlzz.png"/>
            <span class="title">精神心理症状</span>
          </div>
          <div class="mian">
            <div class="jl">
              <img alt="" src="@/assets/images/journal/jl.png"/><span class="title"
            >焦虑</span
            >
              <div id="jiaolv">
                <span v-for="item in numList" :class="list.zz_js_jiaolv == item ? 'active' : ''" id="jl" :key="item">
                  {{ item }}
                </span>
              </div>
              <div class="detail">
                <span class="low">无焦虑</span>
                <span class="nice">极度焦虑</span>
              </div>
            </div>
            <div class="yy">
              <img alt="" src="@/assets/images/journal/yy.png"/><span class="title"
            >抑郁</span
            >

              <div id="yiyu">
                <span v-for="item in numList" :class="list.zz_js_yiyu == item ? 'active' : ''" id="yy" :key="item">
                  {{ item }}
                </span>
              </div>
              <div class="detail">
                <span class="low">无抑郁</span>
                <span class="nice">极度抑郁</span>
              </div>
            </div>
            <div class="zw">
              <img alt="" src="@/assets/images/journal/zw.png"/><span class="title"
            >谵妄</span
            >

              <div id="zhanwang">
                <span v-for="item in numList" :class="list.zz_js_zhanwang == item ? 'active' : ''"  id="zw" :key="item">
                  {{ item }}
                </span>
              </div>
              <div class="detail">
                <span class="low">无谵妄</span>
                <span class="nice">极度谵妄</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="qita">
        <div class="qt">
          <div class="tit">
            <img alt="" src="@/assets/images/journal/qt.png"/>
            <span class="title">其他情况</span>
          </div>
          <div>
            <van-field
              v-model="list.zz_content"
              autosize
              class="textarea"
              placeholder="暂无数据"
              readonly
              rows="5"
              type="textarea"
            />

            <div class="meiti">
              <!-- 语音列表 -->
              <div style="width: 60%">
                <!-- <aplayer :music="videoUpload"></aplayer> -->
              </div>

              <!-- <div v-for="(item,index) in yuyinlist" :key="index" >
              </div> -->
              <!-- 图片列表 -->
              <div v-for="(item,index) in zzimglist" :key="index" class="zzimg">
                <van-image :src="apiConfig.imgUrl + item" @click="Preview(zzimglist,index)"></van-image>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 血液指标 -->
    <div class="bom-info bom-infoTow ">
      <div class="journalTitle">
        <img alt src="@/assets/images/journal/xyzb.png"/>
        <h1>血液指标</h1>
      </div>
      <van-row align="center" justify="space-between" type="flex">
        <van-col span="20">
          <van-field
            v-model="list.xueye_na"
            label="钠"
            placeholder="暂无数据"
            readonly
            type="number"
          />
        </van-col>
        <van-col class="company" span="6">mmol/L</van-col>
      </van-row>
      <van-row align="center" justify="space-between" type="flex">
        <van-col span="20">
          <van-field
            v-model="list.xueye_gai"
            label="钙"
            placeholder="暂无数据"
            readonly
            type="number"
          />
        </van-col>
        <van-col class="company" span="6">mmol/L</van-col>
      </van-row>
      <van-row align="center" justify="space-between" type="flex">
        <van-col span="20">
          <van-field
            v-model="list.xueye_jia"
            label="钾"
            placeholder="暂无数据"
            readonly
            type="number"
          />
        </van-col>
        <van-col class="company" span="6">mmol/L</van-col>
      </van-row>
      <van-row align="center" justify="space-between" type="flex">
        <van-col span="20">
          <van-field
            v-model="list.xueye_lin"
            label="磷"
            placeholder="暂无数据"
            readonly
            type="number"
          />
        </van-col>
        <van-col class="company" span="6">mmol/L</van-col>
      </van-row>
      <van-row align="center" justify="space-between" type="flex">
        <van-col span="20">
          <van-field
            v-model="list.xueye_crp"
            label="C反应蛋白（CRP）"
            placeholder="暂无数据"
            readonly
            type="number"
          />
        </van-col>
        <van-col class="company" span="6">mg/DL</van-col>
      </van-row>
      <van-row align="center" justify="space-between" type="flex">
        <van-col span="20">
          <van-field
            v-model="list.xueye_tbil"
            label="总胆红素（TBIL）"
            placeholder="暂无数据"
            readonly
            type="number"
          />
        </van-col>
        <van-col class="company" span="6">umd/L</van-col>
      </van-row>
      <van-row align="center" justify="space-between" type="flex">
        <van-col span="20">
          <van-field
            v-model="list.xueye_alb"
            label="白蛋白（ALB）"
            placeholder="暂无数据"
            readonly
            type="number"
          />
        </van-col>
        <van-col class="company" span="6">g/L</van-col>
      </van-row>
      <van-row align="center" justify="space-between" type="flex">
        <van-col span="20">
          <van-field
            v-model="list.xueye_alt"
            label="谷丙转氨酶（ALT）"
            placeholder="暂无数据"
            readonly
            type="number"
          />
        </van-col>
        <van-col class="company" span="6">u/L</van-col>
      </van-row>
      <van-row
        align="center"
        class="borderNone"
        justify="space-between"
        type="flex"
      >
        <van-col span="20">
          <van-field
            v-model="list.xueye_cr"
            label="肌酐（Cr）"
            placeholder="暂无数据"
            readonly
            type="number"
          />
        </van-col>
        <van-col class="company" span="6">umd/L</van-col>
      </van-row>
      <van-image
        v-for="(item,index) in xueyeimg" :key="index"
        :src="apiConfig.imgUrl + item"
        class="BloodIndexImg"
        fit="cover"
        @click="Preview(xueyeimg,index)"
      />
    </div>
  <!-- 用药情况 -->
    <div class="bom-info bom-infoTow">
      <div class="journalTitle">
        <img alt src="@/assets/images/journal/yyqk.png"/>
        <h1>用药情况</h1>
      </div>
      <p class="dietTitle">口服情况</p>
      <div v-for="item in yaowu" :key="item.index" class="dietBox">
        <van-field
          v-model="item.info"
          autosize
          class="textarea"
          placeholder="暂无内容"
          readonly
          rows="4"
          type="textarea"
        />
        <div class="img_box">
          <div class="img" v-for="(items,index) in item.img" :key="items.index">
            <van-image
              :src="apiConfig.imgUrl + items"
              class="BloodIndexImg"
              fit="cover"
              @click="Preview(item.img,index)"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import apiConfig from "../../../config/api.config";
import {jiankangloginfo} from "@/apis/record";
import {ImagePreview} from "vant";
import aplayer from "vue-aplayer";

export default {
  components: {
    ImagePreview,
    aplayer
  },
  data() {
    return {
      apiConfig,
      detailId: "",
      numList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      list: {},
      videoUpload: {
        progress: false,
        progressPercent: 0,
        successPercent: 0,
        music: {
          title: "",
          author: "",
          url: "",
          lrc: "[00:00.00]lrc here\n[00:01.00]aplayer"
        }
      },
      yaowu:null,
      zzimglist:null,
      xueyeimg:null,
    };
  },

  methods: {
    onClickLeft() {
      this.$router.go(-1); //返回上一层
    },
    jiankang() {
      jiankangloginfo({id: this.detailId})
        .then(res => {
          this.list = res.data.list;
          this.yaowu = res.data.yaowu;
          this.zcArr = res.data.yinshi_zaocan;
          this.wcArr = res.data.yinshi_wucan;
          this.dArr = res.data.yinshi_wancan;
          this.yinshi_jiacan = res.data.yinshi_jiacan;
          this.stmedia = res.data.stmedia;
          this.hdmedia = res.data.hdmedia;
          this.xueyeimg = res.data.xueyeimg;
          this.zzimglist = res.data.zzimglist;
          this.yuyinlist = res.data.yuyinlist;
          console.log(this.list)
          if (this.list.zz_xinqing == null) {
            this.list.zz_xinqing = 0
          }
          if (this.list.zz_shiyu == null) {
            this.list.zz_shiyu = 0
          }
          if (this.list.zz_fali == null) {
            this.list.zz_fali = 0
          }
          if (this.list.zz_huxikunnan == null) {
            this.list.zz_huxikunnan = 0
          }
          if (this.list.zz_xh_kougan == null) {
            this.list.zz_xh_kougan = 0
          }
          if (this.list.zz_xh_outu == null) {
            this.list.zz_xh_outu = 0
          }
          if (this.list.zz_js_yiyu == null) {
            this.list.zz_js_yiyu = 0
          }
          if (this.list.zz_js_jiaolv == null) {
            this.list.zz_js_jiaolv = 0
          }
          if (this.list.zz_js_zhanwang == null) {
            this.list.zz_js_zhanwang = 0
          }
          if (this.list.zz_kexue == null || this.list.zz_kexue == -1) {
            this.list.zz_kexue = "0"
          }
          if (this.list.zz_shifoupaibian == null || this.list.zz_shifoupaibian == -1) {
            this.list.zz_shifoupaibian = 0
          }
          if (this.list.zz_shifoufuxie  == null || this.list.zz_shifoufuxie  == -1 ) {
            this.list.zz_shifoufuxie = 0
          }
          if (this.list.zz_shifouganzao == null || this.list.zz_shifouganzao == -1) {
            this.list.zz_shifouganzao = 0
          }
          if (this.list.zz_xh_ouxue == null || this.list.zz_xh_ouxue == -1) {
            this.list.zz_xh_ouxue = "0"
          }
          if (this.list.zz_xh_fuzhang == null || this.list.zz_xh_fuzhang == -1) {
            this.list.zz_xh_fuzhang = 0
          }
          if (this.list.zz_xh_fuxie == null) {
            this.list.zz_xh_fuxie = 0
          }
          if (this.list.zz_xh_bianmi == null) {
            this.list.zz_xh_bianmi = 0
          }
          if (this.list.zz_shifouxinhuang == null || this.list.zz_shifouxinhuang == -1) {
            this.list.zz_shifouxinhuang = 0
          }
          if (this.list.zz_tengtongdengji == null) {
            this.list.zz_tengtongdengji = 0
          }
          if (this.list.zz_fare == null) {
            this.list.zz_fare = 0
          }
          if (this.list.zz_shuizhong == null) {
            this.list.zz_shuizhong = 0
          }
          if (this.list.zz_kesou == null) {
            this.list.zz_kesou = 0
          }

        })
        .catch(err => {
          if (err.msg) {
            this.$toast(err.msg);
          } else {
            this.$toast('网络错误');
          }
        });
    },
    Preview(imgs,index) {
      console.log(index)
      let arr = [];
      for (let i = 0; i < imgs.length; i++) {
        const element = imgs[i];
        arr.push(apiConfig.imgUrl + element);
      }
      ImagePreview({ images:arr,startPosition:index});
    },
    
    zzimglistPreview(imgs,index) {
      let arr = [];
      for (let i = 0; i < this.zzimglist.length; i++) {
        const element = this.zzimglist[i];
        arr.push(apiConfig.imgUrl + element);
      }
      ImagePreview({ images:arr,startPosition:index});
      
    },
    xueyeimgPreview(imgs,index) {
      let arr = [];
      for (let i = 0; i < this.xueyeimg.length; i++) {
        const element = this.xueyeimg[i];
        arr.push(apiConfig.imgUrl + element);
      }
      ImagePreview({ images:arr,startPosition:index});
    },
    Previewpac(imgs,index) {
      let arr = [];
      for (let i = 0; i < this.stmedia.length; i++) {
        const element = this.stmedia[i].nm;
        arr.push(apiConfig.imgUrl + element);
      }
      ImagePreview({images:arr,startPosition:index});
    },
    Previewp(imgs,index) {
      let arr = [];
      for (let i = 0; i < this.hdmedia.length; i++) {
        const element = this.hdmedia[i].nm;
        arr.push(apiConfig.imgUrl + element);
      }
      ImagePreview({ images:arr,startPosition:index});
    },
  },
  mounted() {
    this.jiankang();
  },
  created() {
    this.detailId = this.$route.params.id;
  }
};
</script>

<style lang="less">
//html {
//  min-height: 100vh;
//
//}

#HealthLogDetails {
  background-color: #fff;
  text-align: left;
  min-height: 100vh;

  .huxi {
    // margin: 10px 0;
    background-color: #fff;
    border-radius: 6px;
    margin-bottom: 10px;

    .hx {
      .title {
        font-size: 17px;
        vertical-align: middle;
      }

      .info {
        vertical-align: bottom;
      }

      img {
        width: 21px;
        height: 21px;
        margin-right: 13px;
        vertical-align: middle;
      }
    }

    .mian {
      margin-top: 17px;

      .van-row {
        padding: 20px 0;
        border-bottom: 1px solid rgba(210, 210, 210, 1);

        &:last-child {
          border-bottom: 0;
        }

        .van-radio-group--horizontal {
          justify-content: flex-end;
        }

        .title {
          font-size: 15px;
        }
      }

      .title {
        //  font-size: 15px;
        .van-cell__title {
          color: #151515;
          font-size: 15px;
        }
      }

      .van-cell {
        padding: 0;
      }
    }
  }

  .kougan {
    // margin: 10px 0;
    padding: 23px 15px 0;
    background-color: #fff;
    border-radius: 6px;
    margin-bottom: 10px;

    .kg {
      .title {
        font-size: 17px;
        vertical-align: middle;
      }

      .info {
        vertical-align: bottom;
      }

      img {
        width: 21px;
        height: 21px;
        margin-right: 13px;
        vertical-align: middle;
      }
    }

    .mian {
      margin-top: 17px;

      .van-row {
        padding: 20px 0;
        border-bottom: 1px solid rgba(210, 210, 210, 1);

        &:last-child {
          border-bottom: 0;
        }

        .van-radio-group--horizontal {
          justify-content: flex-end;
        }

        .title {
          font-size: 15px;
        }
      }

      .title {
        //  font-size: 15px;
        .van-cell__title {
          color: #151515;
          font-size: 15px;
        }
      }

      .van-cell {
        padding: 0;
      }
    }
  }

  .xhxt {
    // margin: 10px 0;
    background-color: #fff;
    border-radius: 6px;
    margin-bottom: 10px;

    .xh {
      .title {
        font-size: 17px;
        vertical-align: middle;
      }

      .info {
        vertical-align: bottom;
      }

      img {
        width: 21px;
        height: 21px;
        margin-right: 13px;
        vertical-align: middle;
      }
    }

    .mian {
      margin-top: 17px;

      .van-row {
        padding: 20px 0;
        border-bottom: 1px solid rgba(210, 210, 210, 1);

        &:last-child {
          border-bottom: 0;
        }

        .van-radio-group--horizontal {
          justify-content: flex-end;
        }

        .title {
          font-size: 15px;
        }
      }

      .title {
        //  font-size: 15px;
        .van-cell__title {
          color: #151515;
          font-size: 15px;
        }
      }

      .van-cell {
        padding: 0;
      }
    }
  }

  .xinqing,
  .shiyu, .fl, .hxkn, .kg, .ex, .ys, .jl, .yy, .zw {
    // padding-bottom: 5px;
    border-bottom: 1px solid #d2d2d2;

    .title {
      font-size: 17px;
      vertical-align: middle;
    }

    img {
      width: 21px;
      height: 21px;
      margin-right: 13px;
      vertical-align: middle;
    }
    #shiyu,
    #xinqing, #fali, #huxi, #kougan, #exin, #yanshi, #jiaolv, #yiyu, #zhanwang {
      //margin: 15px 10px;
      margin: 15px 10px;
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      align-items: center;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
      justify-content: space-between;
      // margin-left: 3px;
      #dengji, #fl, #hxkn, #kg, #ex, #ys, #jl, #yy, #zw {
        display: inline-block;
        width: 22px;
        height: 22px;
        line-height: 22px;
        text-align: center;
        border: 1px solid rgba(0, 0, 0, 1);
        margin-right: 6px;
        border-radius: 5px;

        &:last-child {
          margin-right: 0;
        }
      }

    }


    .detail {
      margin: 10px 10px 10px;
      font-size: 10px;
      // text-align: right;
      .low {
        display: inline-block;
        // width: 78px;
        // height: 19px;
        text-align: left;
      }

      .nice {
        float: right;
      }
    }
  }

  .shiyu {
    margin-top: 10px;

    #shiyu {
      #dengji {
        &.active {
          background: #5297ff;
        }
      }
    }
  }

  .xinqing {
    #xinqing {
      #dengji {
        &.active {
          background: #5297ff;
        }
      }
    }
  }

  .fl {
    margin: 10px 0;
    border-bottom: 0;
    padding-bottom: 5px;

    #fali {
      #fl {

        &.active {
          background: #5297ff;
        }
      }
    }
  }

  .hxkn {
    margin: 10px 0;

    #huxi {
      #hxkn {
        &.active {
          background: #5297ff;
        }
      }
    }
  }

  .kg {
    margin: 10px 0;

    #kougan {
      #kg {
        &.active {
          background: #5297ff;
        }
      }
    }
  }

  .ex {
    margin: 10px 0;

    #exin {
      #ex {
        &.active {
          background: #5297ff;
        }
      }
    }
  }

  .ys {
    margin: 10px 0;

    #yanshi {
      #ys {
        &.active {
          background: #5297ff;
          color: #fff;
        }
      }
    }
  }

  .jl {
    margin: 10px 0;

    #jiaolv {
      #jl {
        &.active {
          background: #5297ff;
        }
      }
    }
  }

  .yy {
    margin: 10px 0;

    #yiyu {
      #yy {
        &.active {
          background: #5297ff;
        }
      }
    }
  }

  .zw {
    margin: 10px 0;
    border-bottom: 0;
    padding-bottom: 10px;

    #zhanwang {
      #zw {
        &.active {
          background: #5297ff;;
        }
      }
    }
  }

  .top {
    height: 150px;
    background: #4e8af4;

    .van-nav-bar {
      color: #fff;
      border: 0 solid #4e8af4;
      background: #4e8af4;

      div {
        color: #fff;

        span {
          color: #fff;
        }

        i {
          color: #fff;
        }
      }
    }

    .van-hairline--bottom::after {
      border-bottom-width: 0px;
    }

    .date {
      width: 120px;
      height: 30px;
      border-radius: 10px;
      margin: 25px auto 0;
      background: #fff;
      text-align: center;
      line-height: 30px;
      font-size: 15px;
    }
  }

  .bom-info {
    width: 94.53%;
    border-radius: 10px;
    margin: -40px auto 0;
    padding: 20px 12px;
    background: #fff;

    .journalTitle {
      display: flex;
      align-items: center;
      flex-direction: row;
      margin-bottom: 30px;

      img {
        width: 40px;
        height: 40px;
      }

      h1 {
        margin-left: 25px;
        font-size: 16px;
        color: #3b8afc;
        font-family: SourceHanSansCN;
        font-weight: bold;
      }
    }

    .dietBox {
      display: flex;
      align-items: flex-start;
      flex-direction: column;
    }

    .BloodIndexImg {
      &.van-image {
        width: 80px;
        height: 80px;
        margin-right: 10px;

        &:last-child {
          margin-right: 0px;
        }
      }

      .van-image__img {
        width: 100%;
        height: 100%;
        object-fit: cover !important;
      }

      img {
        border-radius: 5px;
        margin: 3px 0;
      }
    }

    .BloodIndexImgMt80 {
      margin-top: 80px;
    }

    .textarea textarea {
      display: block;
      width: 100%;
      height: 167px;
      padding: 13px 15px;
      background: rgba(245, 245, 245, 1);
      border-radius: 5px;
      color: #959595;
    }
  }

  .img_box {
    .img {
      display: inline-block;
      margin-right: 10px;

      &:last-child {
        margin-right: 0;
      }
    }

    .van-image {
      width: 60px;
      height: 60px;
    }

    .van-image__img {
      width: 100%;
      height: 100%;
      object-fit: cover !important;
    }

    img {
      border-radius: 5px;
      margin: 3px 0;
    }
  }

  .breakfast {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .breakfastLeft {
      display: flex;
      align-items: center;

      p {
        margin-left: 20px;
      }
    }
  }

  .breakfastImg,
  .van-empty {
    width: 68px;
    height: 55px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  // 身体症状
  .main {
    margin: 10px;
    .sz, .fr, .teto, .xh, .xm, .kskt, .fz, .fx, .bm   {
      // padding-bottom: 5px;
      border-bottom: 1px solid #d2d2d2;

      .title {
        font-size: 17px;
        vertical-align: middle;
      }

      img {
        width: 21px;
        height: 21px;
        margin-right: 13px;
        vertical-align: middle;
      }

      #shuizhong, #fare, #tengtong, #xinhuang, #xiongmen, #kesouketan, #fuzhang, #fuxie, #bianmi {
        margin: 15px 10px;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        // -webkit-box-pack: justify;
        // -webkit-justify-content: space-between;
        // justify-content: space-between;
        // margin-left: 3px;
        #sz, #fr, #teto, #xh, #xm, #kskt, #fz, #fx, #bm {
          display: inline-block;
          width: 22px;
          height: 22px;
          line-height: 22px;
          text-align: center;
          border: 1px solid rgba(0, 0, 0, 1);
          margin-right: 6px;
          border-radius: 5px;

          &:last-child {
            margin-right: 0;
          }
        }

      }

      .detail {
        margin: 10px 10px 10px;
        font-size: 10px;
        // text-align: right;
        .low {
          display: inline-block;
          // width: 78px;
          // height: 19px;

          text-align: left;
        }

        .nice {
          float: right;
        }
      }
    }
    .fl, .sz, .fr, .teto, .xh, .xm, .kskt, .fz, .fx,.bm {
      margin: 10px 0;
      //border-bottom: 0;
      padding-bottom: 5px;
   
      #fali, #shuizhong, #fare, #tengtong, #xinhuang, #xiongmen, #kesouketan, #fuzhang, #fuxie,#bianmi {
        #fl, #sz, #fr, #teto, #xh, #xm, #kskt, #fz, #fx,#bm {

          &.active {
            background: #5297ff;
          }
          
        }
      }
    }
    .fanliu{
      align-items: flex-start;
      text-align: center;
      .fliu{
        div {
          width: 100px;
        }
        .info{
          width: 140px;
          text-align: left;
          margin-top: 10px;
          font-size: 9px;
        }
      }
      

    }
    .header {
      // padding: 23px 15px;
      background-color: #fff;
      border-radius: 6px;

      .shuimian {
        margin-top: 10px;

        .title {
          font-size: 17px;
          vertical-align: middle;
        }

        .tit {
          display: flex;
          align-self: start;
        }

        img {
          width: 21px;
          height: 21px;
          margin-right: 13px;
          vertical-align: middle;
        }

        .main {
          .title {
            font-size: 15px;
          }

          .van-cell {
            vertical-align: middle;
            display: inline-block;
            padding: 0;
          }
        }
      }

      .xinqing,
      .shiyu {
        // padding-bottom: 5px;
        border-bottom: 1px solid #d2d2d2;

        .title {
          font-size: 17px;
          vertical-align: middle;
        }

        img {
          width: 21px;
          height: 21px;
          margin-right: 13px;
          vertical-align: middle;
        }

        #shiyu,
        #xinqing {
          margin: 15px 10px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          // margin-left: 3px;
          #dengji {
            display: inline-block;
            width: 22px;
            height: 22px;
            line-height: 22px;
            text-align: center;
            border: 1px solid rgba(0, 0, 0, 1);
            margin-right: 6px;
            border-radius: 5px;

            &:last-child {
              margin-right: 0;
            }
          }
        }

        .detail {
          display: flex;
          justify-content: space-between;
          margin: 10px 10px 10px;
          font-size: 10px;
          // text-align: right;
          .low {
            display: inline-block;
            // width: 78px;
            // height: 19px;
            text-align: left;
          }

          .nice {
            // float: right;
          }
        }
      }

      .shiyu {
        margin-top: 10px;

        #shiyu {
          #dengji {
            &.active {
              background: #5297ff;
            }
          }
        }
      }

      .xinqing {
        #xinqing {
          #dengji {
            &.active {
              background: #5297ff;
            }
          }
        }
      }
    }

    .paibian {
      margin: 10px 0;
      padding: 23px 0 0;
      background-color: #fff;
      border-radius: 6px;

      .pb {
        .title {
          font-size: 17px;
          vertical-align: middle;
        }

        img {
          width: 21px;
          height: 21px;
          margin-right: 13px;
          vertical-align: middle;
        }
      }

      .mian {
        margin-top: 17px;

        .van-row {
          padding: 20px 0;
          border-bottom: 1px solid rgba(210, 210, 210, 1);

          &:last-child {
            border-bottom: 0;
          }

          .title {
            font-size: 15px;
          }
        }

        .title {
          //  font-size: 15px;
          .van-cell__title {
            color: #151515;
            font-size: 15px;
          }
        }

        .van-cell {
          padding: 0;
        }
      }
    }

    .zhengzhuang {
      // margin: 10px 0;
      padding: 23px 0 0;
      background-color: #fff;
      border-radius: 6px;

      .zz {
        .title {
          font-size: 17px;
          vertical-align: middle;
        }

        .info {
          vertical-align: bottom;
        }

        img {
          width: 21px;
          height: 21px;
          margin-right: 13px;
          vertical-align: middle;
        }
      }

      .mian {
        margin-top: 17px;

        .van-row {
          padding: 20px 0;
          border-bottom: 1px solid rgba(210, 210, 210, 1);

          &:last-child {
            border-bottom: 0;
          }

          .van-radio-group--horizontal {
            justify-content: flex-end;
          }

          .title {
            font-size: 15px;
          }
        }

        .title {
          //  font-size: 15px;
          .van-cell__title {
            color: #151515;
            font-size: 15px;
          }
        }

        .van-cell {
          padding: 0;
        }
      }
    }

    .qita {
      margin-top: 10px;
      padding: 23px 0 0;
      background-color: #fff;
      border-radius: 6px;

      .qt {
        .title {
          font-size: 17px;
          vertical-align: middle;
        }

        .zzimg {
          .van-image {
            width: 80px;
            height: 80px;
          }

          img {
            width: 100%;
            height: 100%;
            border-radius: 5px;
            margin: 3px 0;
          }
        }

        img {
          width: 21px;
          height: 21px;
          margin-right: 13px;
          vertical-align: middle;
        }
      }

      .mian {
        margin-top: 17px;

        .van-cell {
          padding: 0;

          .van-field__control {
            background: rgba(245, 245, 245, 1);
          }
        }
      }

      .meiti {
        margin: 5px 0;
        text-align: left;

        .zzimg {
          width: 80px;
          height: 80px;
          display: inline-block;
          margin-right: 10px;

          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
  }

  .p_row {
    display: block;

    .p_title {
      margin: 10px 0;
      display: inline-block;
      min-width: 25%;
      //padding: 10px 0;
      font-size: 16px;
      color: #151515;
      text-align-last: left;
    }
  }


  .dietTitle {
    padding: 10px 0;
    color: #151515;
    text-align-last: left;
    font-size: 18px;
    font-weight: bold;
  }

  .van-row {
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(210, 210, 210, 0.5);
  }

  .van-cell__title,
  .company {
    font-size: 15px;
    color: #151515;
  }

  .van-field__body {
    input {
      font-size: 15px;
      color: #9b9b9b;
    }
  }

  .mt25 {
    margin-top: 25px;
    padding-left: 10px;
    padding-right: 0;
    border-bottom: 1px solid rgba(210, 210, 210, 0.5);
  }

  .bom-infoTow {
    margin-top: 15px;
  }

  .van-cell__title {
    width: 133px;
  }

  .van-cell {
    padding: 10px 0;
  }

  .borderNone {
    border: none;
  }

  .tit {
    width: 100%;
    display: flex;
  }
}
</style>
